import React, { PureComponent, Fragment } from 'react';
import { Table, Modal, Icon, Divider, Popconfirm, message } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import styles from './YqybTable.less';
import Ellipsis from '@/components/Ellipsis';

import YqybEditFm from './YqybEditForm';

@connect()
class YqybTjfxTable extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      showEditMd: false, //编辑
    };
    this.dispatch = this.props.dispatch;
    this.user_id = sessionStorage.getItem('user_id');

    this.cols = [
      {
        title: '月份',
        dataIndex: 'yf',
        key: 'yf',
        width: 50,
      },
      {
        title: '桥梁名称',
        dataIndex: 'qlmc',
        key: 'qlmc',
        render: text => (
          <Ellipsis length={5} tooltip>
            {text}
          </Ellipsis>
        ),
      },
      {
        title: '道路名称',
        dataIndex: 'dlmc',
        key: 'dlmc',
        render: text => (
          <Ellipsis length={5} tooltip>
            {text}
          </Ellipsis>
        ),
      },
      {
        title: '市 政 设 施 类 别',
        children: [
          {
            title: '上 部 结 构',
            children: [
              {
                title: (
                  <div>
                    伸缩清理
                    <br />
                    (m)
                  </div>
                ),
                dataIndex: 'ssql',
                key: 'ssql',
              },
              {
                title: (
                  <div>
                    伸缩更换
                    <br />
                    (m)
                  </div>
                ),
                dataIndex: 'ssgh',
                key: 'ssgh',
              },
              {
                title: (
                  <div>
                    过渡砼
                    <br />
                    (m2)
                  </div>
                ),
                dataIndex: 'gdt',
                key: 'gdt',
              },

              {
                title: (
                  <div>
                    砼护栏
                    <br />
                    (m)
                  </div>
                ),
                dataIndex: 'thl',
                key: 'thl',
              },
              {
                title: (
                  <div>
                    石护栏
                    <br />
                    (m)
                  </div>
                ),
                dataIndex: 'shl',
                key: 'shl',
              },
              {
                title: (
                  <div>
                    铁制护栏
                    <br />
                    (m)
                  </div>
                ),
                dataIndex: 'tzhl',
                key: 'tzhl',
              },
              {
                title: (
                  <div>
                    防撞栏
                    <br />
                    (m)
                  </div>
                ),
                dataIndex: 'fzl',
                key: 'fzl',
              },
            ],
          },
          {
            title: '下 部 结 构',
            children: [
              {
                title: (
                  <div>
                    支座
                    <br />
                    (只)
                  </div>
                ),
                dataIndex: 'zz',
                key: 'zz',
              },
              {
                title: (
                  <div>
                    盖桥露筋
                    <br />
                    (m2)
                  </div>
                ),
                dataIndex: 'gqlj',
                key: 'gqlj',
              },

              {
                title: (
                  <div>
                    梁板露筋
                    <br />
                    (m2)
                  </div>
                ),
                dataIndex: 'lblj',
                key: 'lblj',
              },
              {
                title: (
                  <div>
                    桥墩露筋
                    <br />
                    (m2)
                  </div>
                ),
                dataIndex: 'qdlj',
                key: 'qdlj',
              },

              {
                title: (
                  <div>
                    梁板裂缝超宽注浆
                    <br />
                    (m)
                  </div>
                ),
                dataIndex: 'lblfckzj',
                key: 'lblfckzj',
              },
              {
                title: (
                  <div>
                    桥墩露筋
                    <br />
                    (m)
                  </div>
                ),
                dataIndex: 'lblffb',
                key: 'lblffb',
              },
            ],
          },
          {
            title: (
              <div>
                涂装
                <br />
                (m2)
              </div>
            ),
            dataIndex: 'tz',
            key: 'tz',
          },
          {
            title: (
              <div>
                泄水空
                <br />
                (个)
              </div>
            ),
            dataIndex: 'xsk',
            key: 'xsk',
          },
        ],
      },
    ];
    this.onChange = this.onChange.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.clickItem = this.clickItem.bind(this);
    this.handleRevert = this.handleRevert.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  componentDidMount() {}

  onChange(pagination, filters, sorter) {
    var qc = this.props.queryCon;
    this.pg['current'] = pagination.current;
    this.props.GetQueryProblem({
      pageindex: this.pg['current'],
      companyid: qc['companyid'],
      type: qc['type'],
      source: qc['source'],
      status: qc['status'],
      bovertime: qc['bovertime'],
      eovertime: qc['eovertime'],
      btime: qc['btime'],
      etime: qc['etime'],
    });
  }

  handleCancel(v) {
    var obj = {};
    obj[v] = false;
    this.setState(obj);
  }
  handleEdit = record => {
    this.setState({
      showEditMd: true,
      modalT: '编辑',
      record: record,
    });
  };
  handleRevert = record => {
    const hide = message.loading('正在回退...', 0);
    this.dispatch({
      type: 'maintain/fetchYqybEditRollback',
      payload: { id: record.id },
      callback: response => {
        hide();
        if (response.status) {
          message.success('回退成功');
        } else {
          message.error('回退失败');
          console.log(response.ErrorMessage);
        }
        this.props.GetQueryModelData(this.props.queryCon);
      },
    });
  };
  handleDelete = record => {
    const hide = message.loading('正在删除...', 0);
    this.dispatch({
      type: 'maintain/fetchYqybDelete',
      payload: { id: record.id },
      callback: response => {
        hide();
        if (response.status) {
          message.success('删除成功');
          this.props.GetQueryProblem(this.props.queryCon);
        } else {
          message.error('删除失败');
          console.log(response.ErrorMessage);
        }
      },
    });
  };

  //单击item
  clickItem(item) {
    this.props.clickItem(item);
  }

  render() {
    var p = this.props;
    var s = this.state;

    const BodyWrapper = props => {
      return (
        <tbody {...props}>
          <React.Fragment>
            {props.children}
            <tr className="ant-table-row">
            <td>合计</td>
              <td />
              <td />
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_ssql : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_ssgh : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_gdt : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_thl : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_shl : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_tzhl : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_fzl : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_zz : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_gqlj : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_lblj : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_qdlj : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_lblfckzj : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_lblffb : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_tz : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_xsk : null}</td>
              {/* <td />
              <td /> */}
            </tr>
          </React.Fragment>
        </tbody>
      );
    };

    return (
      <div>
        <Table
          className={styles.yqybTable}
          dataSource={p.sjsbTbData}
          components={
            p.sjsbTbSum.data && p.sjsbTbSum.data.length != 0
              ? { body: { wrapper: BodyWrapper } }
              : ''
          }
          columns={this.cols}
          bordered
          // onChange={this.onChange}
          // pagination={this.pg}
          // onRow={record => {
          //   return {
          //     onClick: this.clickItem.bind(this, record),
          //   };
          // }}
        />

        {s.showEditMd ? (
          <Modal
            title={s.modalT}
            visible={true}
            onCancel={e => this.handleCancel('showEditMd')}
            footer={null}
            bodyStyle={{ padding: 0 }}
            width={800}
          >
            <div className="modal_con_se">
              <YqybEditFm
                parent={this}
                record={s.record}
                modalT={s.modalT}
                modalName={'showEditMd'}
                handleCancel={this.handleCancel}
                GetQueryModelData={p.GetQueryModelData}
                queryCon={p.queryCon}
              />
            </div>
          </Modal>
        ) : null}
      </div>
    );
  }
}

export default YqybTjfxTable;
